<template>
  <!-- #ifndef H5 -->
  <view class="statusNav" :style="
    properties.navStyle
  ">

    <view  class="mp-header" :style="{
              'background-color': properties.setStyle.bgColor,
               height: sysHeight,
              'color':properties.setStyle.titleColor
            }"
    >
      <view class="sys-head" :style="{ height: sysHeight,
                }"></view>

      <uv-navbar  :bgColor="properties.setStyle.bgColor?properties.setStyle.bgColor:'none'">
        <template v-slot:left>
          <view v-if="properties.showLeft && properties.showHome" :style="
            properties.btnStyle
          " class="uv-nav-slot">
            <uv-icon @click="leftClick" v-if="properties.showLeft && pagesSize>1" name="arrow-left" size="19"></uv-icon>
            <uv-line v-if="properties.showLeft && properties.showHome && pagesSize>1"  direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
            <uv-icon @click="homeClick" v-if="properties.showHome" name="home" size="20"></uv-icon>
          </view>
        </template>

        <template v-slot:center>
          <text :style="{
            color: properties.setStyle.titleColor
          }">
            {{properties.title}}
          </text>
        </template>

        <template v-slot:right>
          <view class="uv-navbar__content__right">
          </view>
        </template>

      </uv-navbar>
    </view>
  </view>
  <!-- #endif -->
</template>
<script>

let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
  name: "StatusNav",
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          title: "StatusBar",
          showLeft: true,
          showHome: true,
          navStyle:{},
          btnStyle:{},
          setStyle: {
            bgColor: "white",
            enableBack: false,
            leftText:'',
            titleStyle: {
              color: 'white'
            }
          }
        }
      }
    },
  },
  data() {
    return {
      sysHeight: sysHeight,
      pagesSize: 2,
    }
  },
  created(){
    const pages = getCurrentPages();
    this.pagesSize = pages.length
    console.log("this.pagesSize",this.pagesSize)
  },
  methods: {
    leftClick(e) {
      // #ifdef H5
      return history.back();
      // #endif

      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },
    homeClick() {
      uni.$emit("tabBarIndexChange", 0);
      this.$store.commit('SET_TAB_BAR_IDX',0);
      uni.switchTab({ url: '/pages/index/index' });
    },
  },
  onShow() {
    console.log("---", this.properties)
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
